<!-- Slider
    ============================================= -->
<section id="slider" class="slider-element slider-parallax clearfix sliderheight">

    <!-- HTML5 Video Wrap
    ============================================= -->
    <div class="wrap">
        <video id="slide-video" preload="auto" loop autoplay muted>
            <source src="{{ url(asset_path('visiosoft.theme.coursefinder::images/1.mp4')) }}"  type='video/mp4'/>
        </video>
        <div class="video-overlay" style="background: rgba(0,0,0,0.5); z-index: 1"></div>
    </div>
    <div class="vertical-middle center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-7">
                    <div class="slider-title mb-5 dark clearfix">
                        <h2 class="text-white text-rotater mb-2" data-separator="," data-rotate="fadeIn" data-speed="3500">Learn More About
                            <span class="t-rotate text-white">{{ trans('visiosoft.theme.coursefinder::field.placeholder-button.name') }}</span>.</h2>
                        <p class="lead mb-0 uppercase ls2" style="color: #CCC; font-size: 110%">What Do You Want To Learn?</p>
                    </div>
                    <div class="clear"></div>
                    <form action="{{ url_route('visiosoft.module.advs::list') }}" method="GET" >
                        <div class="input-group input-group-lg mt-1">
                            <input class="form-control rounded noborder" type="search" name="keyword"  placeholder="Search Your Courses.." aria-label="Search">
                            <div class="input-group-append">
                                <button class="btn" type="submit"><i class="icon-line-search t700"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="content" style="overflow: visible;">

    <div class="content-wrap">

        <!-- Wave Shape Divider
        ============================================= -->
        <div class="wave-bottom wawe"></div>

    </div>
</section>
<div class="section m-0">
    <div class="container">
        <div class="row">

            <div class="col-md-7">
                {{ blocks('advs-default-theme-video-bottom') }}
            </div>

            <div class="col-md-5">
                {{ blocks('advs-default-theme-top-description-bottom') }}


            </div>

        </div>
    </div>
</div>

<section id="content">
    <div class="content-wrap clearfix">
        <div class="container">
            <div class="row clearfix">
                {% for answerquestion_detail in template.page.faqs %}
                    <div class="col-md-12">
                        <div class="toggle toggle-bg" data-animate="fadeIn">
                            <div class="togglet rounded-top t400"><strong class="mr-1">Q.
                                </strong>{{ answerquestion_detail.question_text }}<i
                                        class="toggle-icon icon-line-circle-plus"></i></div>
                            <div class="togglec rounded-bottom">{{ answerquestion_detail.answer_text }}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section><!-- #content end -->

<section id="content" style="overflow: visible; " >

    <div class="content-wrap contactpadding">
        {{ blocks('advs-default-theme-contact-us-bottom') }}

    </div>

</section><!-- #content end -->


<div id="gotoTop" class="icon-angle-up"></div>
